<template>
  <view class="order-detail">
    <view class="order-info">
      <view class="order-row">
        <view class="label">工作状态</view>
        <uv-text
          :text="statusType(orderInfo.status)"
          :color="statusColor(orderInfo.status)"
          size="28rpx"
        />
      </view>
      <view class="order-row">
        <view class="label">发起人员</view>
        <uv-text
          :text="orderInfo.createByNickName"
          color="#212121"
          size="28rpx"
          lines="1"
        />
      </view>
      <view class="order-row">
        <view class="label">提交时间</view>
        <uv-text :text="orderInfo.createTime" color="#212121" size="28rpx" />
      </view>
    </view>
    <view class="order-info">
      <g-steps
        v-if="orderInfo.createTime"
        :steps="stepsList"
        direction="row"
        :dot-color="[3, 8, 9, 11, 14].includes(orderInfo.status) ? '#FF3B30' : '#4EA770'"
        :current="[3, 7, 8, 9, 11, 14].includes(orderInfo.status) ? 1 : 0"
        stepsId="order-steps"
      >
        <template #step1>
          <view class="step-tips"
            >已等待{{
              getTimeDistance(
                orderInfo.createTime,
                orderInfo.status == 3 ? orderInfo.auditTime : orderInfo.overTime
              )
            }}</view
          >
        </template>
      </g-steps>
      <g-tabs-top :list="tabList" v-model:current="current" sticky :col="4" />
      <Detail :info="orderInfo" />
      <view
        v-if="orderInfo.status == 10"
        class="ss-r-60 ss-size ss-shadow ss-font-28 outLogin ss-p-30"
        @click="handleCommand"
      >
        我要接单
      </view>
    </view>
    <vvDialog v-model:projectType="projectType" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getTimeDistance } from "@/common/mothed";
import vvDialog from "@/components/Dialog/Dialog.vue";
import Detail from "@/pages/Order/cp/Detail.vue"; // 详情
import { getOrderDetail, addOrderRecord } from "@/request/order";

const orderId = ref(""); // 工单id
const projectType = ref(0);
const orderInfo = ref({}); // 工单详情
const stepsList = ref([{ label: "发起工单" }, { label: "处理完成" }]);

const statusList = ref([
  { label: "待负责人审批", value: 1, color: "#212121" },
  { label: "待业主审批", value: 2, color: "#212121" },
  { label: "被退回", value: 3, color: "#FF3B30" },
  { label: "重新发起", value: 4, color: "#212121" },
  { label: "维修接单", value: 5, color: "#212121" },
  { label: "维修结束", value: 6, color: "#4EA770" },
  { label: "已完结", value: 7, color: "#4EA770" },
  { label: "复验不通过", value: 8, color: "#FF3B30" },
  { label: "撤销工单", value: 9, color: "#212121" },
  { label: "任务发布", value: 10, color: "#212121" },
  // { label: "业主退回", value: 11, color: "#FF3B30" },
  // { label: "转回机构处理", value: 12, color: "#212121" },
  // { label: "待二次复验", value: 13, color: "#212121" },
  // { label: "二次复验不通过", value: 14, color: "#FF3B30" },
]); // 状态列表
const current = ref(0); // 选中tab栏
const tabList = ref([{ label: "工单详情" }]);

onLoad((e) => {
  orderId.value = e.id;
});

onShow(() => {
  setTimeout(() => {
    getData();
  }, 100);
  projectType.value = 0;
});

// 获取工单详情
const getData = () => {
  getOrderDetail(orderId.value).then((res) => {
    if (res.code == 200) {
      orderInfo.value = res.data;
      // 设置页面标题
      uni.setNavigationBarTitle({
        title: orderInfo.value.title,
      });
    }
  });
};

// 状态类型
const statusType = (status) => {
  let type = statusList.value.find((item) => item.value == status);
  return type?.label;
};

// 状态颜色
const statusColor = (status) => {
  let type = statusList.value.find((item) => item.value == status);
  return type?.color;
};

// 接单
const handleCommand = () => {
  addOrderRecord({
    workOrderId: orderInfo.value.id,
    type: 5,
  }).then((res) => {
    if (res.code == 200) {
      uni.$emit("task");
      getData();
      projectType.value = 5;
    }
  });
};
</script>

<style lang="scss" scoped>
.order-detail {
  padding: 30rpx;
  padding-bottom: 100rpx;

  .order-info {
    width: auto;
    background: #fff;
    box-shadow: 0 0 20rpx 2rpx rgba(117, 117, 117, 0.16);
    border-radius: 20rpx;
    margin-bottom: 60rpx;

    .order-row {
      display: flex;
      height: 100rpx;
      align-items: center;
      padding: 0 20rpx;
      border-bottom: 2rpx solid #e5e5e5;

      .label {
        width: 180rpx;
        font-size: 28rpx;
        text-align: center;
        color: #757575;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.outLogin {
  background: #4ea770;
  color: #fff;
  text-align: center;
  position: fixed;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  box-shadow: 0 12rpx 30rpx 2rpx rgba(78, 167, 112, 0.5);
}

.step-tips {
  position: absolute;
  left: 0;
  top: 60rpx;
  width: 630rpx;
  text-align: center;
}

.func_btn {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 40rpx;
  z-index: 9;
  height: 120rpx;
  background: #ffffff;
  box-shadow: 0 0 30rpx 2rpx rgba(94, 94, 94, 0.16);
  border-radius: 60rpx;
  display: flex;
  align-items: center;

  .btn_con {
    flex: 1;
    text-align: center;
    border-right: 1rpx solid #dedede;

    &:last-child {
      border-right: none;
    }
  }
}
</style>
